<template>
	<view class="container">
		<view class="plate-display-area">
			<view class="plate-number" :class="{ 'blue-plate': plate.length === 7, 'green-plate plate-number-color': plate.length === 8}">
				{{ plate }}
			</view>
		</view>



		<uni-card title="停车信息" class="info-card">
      <view class="info-item">
        <text class="label">停车场</text>
        <text class="value">{{ parkingInfo.parkName }}</text>
      </view>
			<view class="info-item">
				<text class="label">入场时间</text>
				<text class="value">{{ parkingInfo.entryTime }}</text>
			</view>
			<view class="info-item">
				<text class="label">停车时长</text>
				<text class="value">{{ parkingInfo.duration }}</text>
			</view>
			<view class="info-item">
				<text class="label">缴费金额</text>
				<text class="value amount">¥ {{ parkingInfo.amount }}</text>
			</view>
			<view class="info-item">
				<text class="label">入场图片</text>
				<image class="entry-image" :src="parkingInfo.entryImage" mode="aspectFill" @click="previewImage(parkingInfo.entryImage)"></image>
			</view>
		</uni-card>

		<button class="pay-btn" @click="openPaymentPopup">确认支付</button>

		<!-- 支付弹窗 -->
		<uni-popup ref="paymentPopup" type="bottom">
			<view class="payment-popup-content">
				<view class="popup-header">确认支付</view>
				<view class="payment-amount">¥ {{ parkingInfo.amount }}</view>
				<view class="payment-option" :class="{ 'disabled': isBalanceInsufficient }" @click="handlePayment('balance')">
					<text>余额支付 (剩余 ¥{{ balance.toFixed(2) }})</text>
					<uni-icons v-if="!isBalanceInsufficient" type="right" size="16"></uni-icons>
				</view>
				<view class="payment-option" @click="handlePayment('wechat')">
					<text>{{ paymentEnvText }}</text>
					<uni-icons type="right" size="16"></uni-icons>
				</view>
				<view class="cancel-btn" @click="closePaymentPopup">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const plate = ref('');
const parkingInfo = ref({
  parkName: '新宇创谷B座',
	entryTime: '2023-10-28 08:00:00',
	duration: '3小时15分钟',
	amount: '20.00',
	entryImage: '/static/logo.png'
});

onLoad((options) => {
	if (options.plate) {
		plate.value = options.plate;
	}
});

const paymentPopup = ref(null);
const balance = ref(10.00); // 模拟用户余额
const paymentEnvText = ref('微信支付');

const isBalanceInsufficient = computed(() => {
	return parseFloat(parkingInfo.value.amount) > balance.value;
});

onMounted(() => {
    // #ifdef MP-WEIXIN
    paymentEnvText.value = '微信支付';
    // #endif
    // #ifdef MP-ALIPAY
    paymentEnvText.value = '支付宝支付';
    // #endif
});

const previewImage = (url) => {
	uni.previewImage({
		urls: [url],
		current: 0
	});
};

const openPaymentPopup = () => {
	paymentPopup.value.open();
};

const closePaymentPopup = () => {
	paymentPopup.value.close();
};

const handlePayment = (method) => {
	if (method === 'balance' && isBalanceInsufficient.value) {
		uni.showToast({
			title: '余额不足',
			icon: 'none'
		});
		return;
	}

	closePaymentPopup();
	uni.showLoading({ title: '支付中...' });

	setTimeout(() => {
		uni.hideLoading();
		uni.showToast({ title: '支付成功', icon: 'success' });
		// 支付成功后逻辑
		if (method === 'balance') {
			balance.value -= parseFloat(parkingInfo.value.amount);
		}
		setTimeout(() => {
			// 可以跳转到订单详情或列表页
			uni.navigateBack();
		}, 1500);
	}, 1000);
};



</script>

<style scoped>

.container {
	padding: 20rpx;

	background-color: #f5f5f5;
	height: 100%;
	/* background-color: #ffffff; */
}

.plate-display-area {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 40rpx;
}

.plate-number {
	padding: 20rpx 40rpx;
	border-radius: 20rpx;
	font-size: 88rpx;
	/*font-weight: bold;*/
	color: #fff;
	text-align: center;
	letter-spacing: 5rpx;
}

.plate-number-color{
  color: #000000bf;
}

.blue-plate {
  border: 1px solid #f0f0f0;
	background-color: #007aff;
}

.green-plate {
  border: 1px solid #353535;
  background: linear-gradient(#ffffff3d, #34c759, #28a745);
  /*background-image: linear-gradient(#50fffa69, #ffffff 30%, #ffffff);*/

}

.info-card {
	margin-bottom: 40rpx;
}

.info-item {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 0;
	border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
	border-bottom: none;
}

.label {
	color: #666;
}

.value {
	color: #333;
}

.amount {
	color: #ff3b30;
	font-weight: bold;
  font-size: 24px;
}

.entry-image {
	width: 320rpx;
	height: 320rpx;
	border-radius: 8rpx;
}

.pay-btn {
  margin-top: 200rpx;
  background-color: #1DCFB7;
  color: #fff;
  border-radius: 1.0625rem;
  width: 80%;
}


/* Payment Popup */
.payment-popup-content {
	background-color: #fff;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	padding: 20rpx 0;
}

.popup-header {
	text-align: center;
	font-size: 32rpx;
	font-weight: bold;
	padding: 20rpx;
}

.payment-amount {
	text-align: center;
	font-size: 50rpx;
	font-weight: bold;
	margin-bottom: 40rpx;
  color: #ff5050;
}

.payment-option {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	font-size: 30rpx;
	border-bottom: 1px solid #f5f5f5;
}

.payment-option.disabled {
	color: #999;
	cursor: not-allowed;
}

.cancel-btn {
	padding: 30rpx;
	text-align: center;
	font-size: 30rpx;
	color: #999;
	border-top: 1px solid #f5f5f5;
}


</style>